
		$(document).ready( function() {
			var g_zoomTimer;
			$('#zoom-in').bind('mousedown', function(e) {
				console.log('mouse down');
				g_zoomTimer = setInterval( function() {
					console.log('zooming in');
					var w = parseFloat($('#cont_id_01').css('width'));
					var h = parseFloat($('#cont_id_01').css('height'));
//					var m = parseFloat($('#cont_id_01').css('margin-left'));
					var c = parseFloat($('div.page_container').css('width'));
					var m = ( c - w ) / 2;
					
					var o = w;
					var d;
					w *= 1.03;
					h *= 1.03;
					d = (w - o ) / 2;
					m = m - d;
					m = ( m > 0? m: 0 );
					var mx = w / 1112;
//					$('#page_id_01').removeAttr('width').attr('width', w + 'px');
//					$('#page_id_01').removeAttr('height').attr('height', h + 'px');
//					$('#cont_id_01').css('width', w + 'px');
//					$('#cont_id_01').css('height', h + 'px');
//					$('#cont_id_01').css('margin-left', m + 'px');
//					$('#cont_id_01').css('margin-right', m + 'px');
//					$('#page_id_01 > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');


					$('div.document_container > div > div > svg').removeAttr('width').removeAttr('height').attr('width', w + 'px').attr('height', h + 'px' );
					$('div.document_container > div > div').css('width', w + 'px').css('height', h + 'px').css('margin-left', m + 'px').css('margin-right', m + 'px' );
					$('div.document_container > div > div > svg > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

					/* top/bottom scrolling is always used */
					var current = $('div.document_container').scrollTop();
					var ratio = w / o; 
					current *= ratio; // trick for keeping the mid screen mid point in the middle.
//					current *= (ratio * 1.005); // trick for keeping the mid screen mid point in the middle.
					console.log("Current=" + current );
//					current += (546/2);
					console.log("Current=" + current );
					$('div.document_container').scrollTop(current);

					/* use scrolling when the content overflows right/left margin */
					if( m == 0 ) {
						console.log('trigger scroll!');
						m = ( w - c ) / 2;
						$('div.document_container').scrollLeft(m);
					}
				}, 30 );
			});				
			$('#zoom-in').bind('mouseup', function(e) {
				console.log('mouse up');
				window.clearInterval(g_zoomTimer);
			});				
			$('#zoom-out').bind('mousedown', function(e) {
				console.log('mouse down');
				g_zoomTimer = setInterval( function() {
					console.log('zooming in');
					var w = parseFloat($('#cont_id_01').css('width'));
					var h = parseFloat($('#cont_id_01').css('height'));
//					var m = parseFloat($('#cont_id_01').css('margin-left'));
					var c = parseFloat($('div.page_container').css('width'));
					var m = ( c - w ) / 2;
					var o = w;
					var d;
					w *= 0.97;
					h *= 0.97;
					d = (w - o ) / 2;
					m = m - d;
					m = ( m > 0 ? m: 0 );
					var mx = w / 1112;

					$('div.document_container > div > div > svg').removeAttr('width').removeAttr('height').attr('width', w + 'px').attr('height', h + 'px' );
					$('div.document_container > div > div').css('width', w + 'px').css('height', h + 'px').css('margin-left', m + 'px').css('margin-right', m + 'px' );
					$('div.document_container > div > div > svg > g[transform]').attr('transform', 'matrix(' + mx + ',0.0,0.0,' + mx + ',0.0,0.0)');

					/* top/bottom scrolling is always used */
					var current = $('div.document_container').scrollTop();
					var ratio = w / o; 
					current *= ratio;
//					current *= (ratio * 0.995);
					$('div.document_container').scrollTop(current);

					if( m == 0 ) {
						console.log('trigger scroll!');
						m = ( w - c ) / 2;
						$('div.document_container').scrollLeft(m);
					}
				}, 30 );
			});				
			$('#zoom-out').bind('mouseup', function(e) {
				console.log('mouse up');
				window.clearInterval(g_zoomTimer);
			});				
		});
